<template>
  <div class="health-record">
    <!-- 健康档案头部 -->
    <div class="health-record-header">
      <van-icon name="arrow-left" @click="backMy" />
      <h3>健康档案</h3>
      <span @click="handleSave">保存</span>
    </div>
    <!-- 健康档案主体 -->
    <div class="health-record-main">
      <p><span>*</span>以下为必填项</p>
      <!-- 必填项模块 -->
      <div class="must-fill">
        <p> <b>与您的关系</b> <span>请选择&gt;</span> </p>
        <p> <b>姓名</b> <input v-model="state.nameValue" type="text" placeholder="请输入姓名"></p>
        <p>
          <b>性别</b>
          <van-radio-group v-model="state.checked">
            <van-radio name="1">男</van-radio>
            <van-radio name="2">女</van-radio>
          </van-radio-group>
        </p>
        <p>
          <b>出生日期</b>
          <span @click="showDate">{{state.dateValue}}&gt;</span>
        </p>
      </div>
      <p>以下为选填项</p>
      <!-- 内容选填模块 -->
      <div class="choice-wrapper">
        <div class="personalInfo-box">
          <p> <b>手机号</b>  <input type="text" placeholder="请输入手机号"> </p>
          <p> <b>身份证号</b> <input type="text" placeholder="请输入身份证号"></p>
          <p> <b>身高</b> <input type="text" placeholder="请输入身高"></p>
          <p> <b>腰围</b> <input type="text" placeholder="请输入腰围"></p>
          <p> <b>体重</b> <span><input type="text" placeholder="请输入体重"></span></p>
        </div>
      </div>
      <div class="drinking">
            <div class="list" v-for="(v,i) in listData" :key="i">
                <div class="title">{{v.title}}</div>
                 <span
                 v-for="(vv,ii) in v.tagList"
                   :key="ii"
                 @click="spClick(i,vv.name)"
                 class="active"
                :class="v.active.indexOf(vv.name) !== -1 ? 'active' : ''"
                 >{{vv.name}}</span>
           </div>
      </div>
    </div>
    <!-- 日期弹出框 -->
    <div class="date-mark" v-show="state.dateFlag">
      <van-datetime-picker
        v-model="state.currentDate"
        @cancel="handleCancel"
        @confirm="handleOk"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
      />
    </div>
  </div>
</template>

<script>
import { reactive, ref } from 'vue'
import listData from './list';
export default {
  setup() {
    const state = reactive({
      checked: '0', // 单选框
      nameValue: '', // 名字输入框
      currentDate: new Date(2000, 0, 1), // 默认出生日期
      dateFlag: false, // 日期选择框控制开关
      dateValue: '请选择' // 日期框默认内容
    })
    // 点击选择日期 弹出框显示
    const showDate = () => {
      state.dateFlag = true
    }
    // 点击取消 弹出框隐藏
    const handleCancel = () => {
      state.dateFlag = false
    }
    // 点击确认 弹出框隐藏
    const handleOk = (value) => {
      state.dateFlag = false
      state.dateValue = formatDate(value)
    }

    // 将标准中国时间改成年月日方法
    const formatTen = (num) => {
      return num > 9 ? (num + '') : ('0' + num)
    }
    // 将标准中国时间改成年月日方法
    const formatDate = (date) => {
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      return year + '-' + formatTen(month) + '-' + formatTen(day)
    }
    // 保存内容 获取数据
    const handleSave = () => {
      console.log(state.nameValue)
    }
    return {
      minDate: new Date(2001, 0, 1),
      maxDate: new Date(2021, 8, 1),
      state,
      showDate,
      handleCancel,
      handleOk,
      handleSave,
      listData: listData
    }
  },
  methods: {
      backMy() {
        this.$router.push({ path: '/mine' })
      },
     spClick(index, name) {
        if (this.listData[index].active.indexOf(name) == -1) {
          if (this.listData[index].only) {
            this.listData[index].active = [];
          }
          this.listData[index].active.push(name);
        } else {
          this.listData[index].active.splice(this.listData[index].active.indexOf(name), 1);
        }
        this.num++;
      }
    }
}
</script>

<style lang="scss" scoped>
.health-record{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgb(241,241,241);
  b{
    font-weight: 400;
  }
  // 日期弹出框
  .date-mark{
    width: 100%;
    height: 30%;
    position: fixed;
    bottom: 0%;
    left: 0%;
  }
  // 健康文档头部
  .health-record-header{
    width: 100%;
    height: 1rem;
    background: #fff;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    padding: 0 .2rem;
    align-items: center;
    i,span{
      color: rgb(79,193,117);
    }
    i{
      font-size: 20px;
    }
  }
  // 健康文档主体
  .health-record-main{
    width: 100%;
    height: 100%;
    flex: 1;
    overflow-x: scroll;
    >p{
      padding: .2rem;
      font-size: 14px;
      color: rgb(162,162,162);
      span{
            padding: 0 0.1rem 0 0;
      }
    }
    // 必填
    .must-fill{
      width: 100%;
      height: auto;
      background: #fff;
      padding: 0 .2rem;
      p{
        width: 100%;
        height: 1.2rem;
        align-items: center;
        border-bottom: 1px solid rgb(239,239,239);
        display: flex;
        justify-content: space-between;
        span{
          color: #ccc;
        }
        input{
          width: 25%;
          border: none;
          outline: none;
          text-align: right;
        }
        .van-radio-group{
          display: flex;
          margin: 0 .1rem;
        }
      }
    }
    // 选填
    .choice-wrapper{
      .personalInfo-box{
        width: 100%;
        height: auto;
        background: #fff;
        padding: 0 .2rem;
        p{
          width: 100%;
          height: 1.2rem;
          align-items: center;
          border-bottom: 1px solid rgb(239,239,239);
          display: flex;
          justify-content: space-between;
          input{
            border: none;
            outline: none;
            text-align: right;
          }
        }
        p:nth-child(1){
          input{
            width: 40%;
          }
        }
        p:nth-child(2){
          input{
            width: 50%;
          }
        }
        p:nth-child(4){
          span{
            display: flex;
            justify-content: flex-end;
            align-items: center;
            input{
              width: 25%;
            }
          }
        }
      }
    }
    .somebox{
      width: 100%;
      height: 3rem;
      background: seashell;
    }
    .drinking{
      height: 13rem;
      background-color: white;
      margin-top:0.2rem;
      .list{
        padding: 0.15rem;
        .title{
          font-size: 0.32rem;
          padding-bottom: 0.2rem;
          margin-left: 0.35rem;
        }
       .active:hover{
            background: #6acf73;
            color: #fff;
        }
        span{
          margin-left: 0.35rem;
          display: inline-block;
          padding: 0.1rem 0.15rem;
          margin-right: 0.2rem;
          margin-bottom: 0.1rem;
          border-radius: 0.4rem;
          background: #f1f1f1;
          color: #656565;
          text-align: center;
        }
      }
    }
  }
}

</style>
